<template>
  <div class="personal-panel">

    <div class="personal-desc" :style="{'background':this.$store.state.app.themeColor}">
      <div class="avatar-container">
        <img class="avatar" :src="require('@/assets/user.png')"/>
      </div>
      <div class="name-role">
        <span class="sender">{{basicUser.name}}-{{basicUser.deptName}}</span>
        <!--<span class="sender">{{basicUser.roleNames}}</span>-->
      </div>
      <div class="register-info">
        <span class="register-info">
          <li class="fa fa-clock-o"></li>
          {{basicUser.createTime}}
        </span>
      </div>
    </div>

    <div class="main-operation">
      <span class="main-operation-item">
        <el-button size="small" icon="fa fa-male" @click="showMyInfo()"> 个人中心</el-button>
      </span>
      <span class="main-operation-item">
          <el-button size="small" icon="fa fa-key" @click="showEditPassword()"> 修改密码</el-button>
      </span>
    </div>

    <!--<div class="other-operation">
      <div class="other-operation-item">
        <li class="fa fa-eraser"></li>
        清除缓存
      </div>
      <div class="other-operation-item">
        <li class="fa fa-user"></li>
        在线人数
      </div>
      <div class="other-operation-item">
        <li class="fa fa-bell"></li>
        访问次数
      </div>
    </div>-->

    <div class="personal-footer" @click="logout">
      <li class="fa fa-sign-out"></li>
      {{$t("common.logout")}}
    </div>

    <!--修改密码-->
    <el-dialog title="修改密码"
               width="20%"
               :modal="false"
               :visible.sync="dialogVisiblePassword"
               :close-on-click-modal="false">
      <el-form :model="resetPasswordForm"
               :rules="resetPasswordRules"
               :size="size"
               label-width="80px"
               label-position="right"
               ref="resetPasswordForm">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input type="password"
                    style="width: 20em"
                    v-model="resetPasswordForm.oldPassword"
                    placeholder="请输入原密码"
                    show-password
                    auto-complete="false">
          </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password"
                    style="width: 20em"
                    v-model="resetPasswordForm.newPassword"
                    placeholder="请输入新密码"
                    show-password
                    auto-complete="false">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmNewPassword">
          <el-input type="password"
                    style="width: 20em"
                    v-model="resetPasswordForm.confirmNewPassword"
                    show-password
                    placeholder="请确认密码"
                    auto-complete="true">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button :size="size" @click.native="dialogVisiblePassword=false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" :loading="editLoading" @click.native="submitForm">
          {{$t('action.submit')}}
        </el-button>
      </div>
    </el-dialog>

    <!--个人中心-->
    <el-dialog title="个人信息"
               width="20%"
               :modal="false"
               :visible.sync="dialogVisiblePerson"
               :close-on-click-modal="false">
      <el-form v-model="basicUser" :size="size" label-width="50px" label-position="right">
        <el-form-item label="名字">
          <el-input v-model="basicUser.name" style="width: 22em" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="basicUser.nickName" style="width: 22em" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="basicUser.mobile" style="width: 22em" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="basicUser.email" style="width: 22em" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="basicUser.deptName" style="width: 22em" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="basicUser.roleNames" style="width: 22em" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="注册">
          <el-input v-model="basicUser.createTime" style="width: 22em" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button :size="size" type="primary" @click.native="dialogVisiblePerson=false">{{$t('action.confirm')}}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "PersonalPanel",
    components: {},
    data() {
      let oldPasswordValidator = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入原密码'));
        } else if (value !== localStorage.getItem('password')) {
          callback(new Error('密码输入错误'));
        } else {
          callback();
        }
      };

      let newPasswordValidator = (rule, value, callback) => {
        let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else if (value === this.resetPasswordForm.oldPassword) {
          callback(new Error('新密码不能和原密码相同'));
          /* } else if (!reg.test(value)) {
             callback(new Error('密码必须由6-12位字母+数字组成'));*/
        } else {
          callback();
        }
      };
      let confirmPasswordValidator = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.resetPasswordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      };
      return {
        size: 'small',
        dialogVisiblePerson: false,
        dialogVisiblePassword: false,
        editLoading: false,
        basicUser: {
          name: '',
          nickName: '',
          mobile: '',
          email: '',
          avatar: '@/assets/user.png',
          roleNames: '',
          deptName: '',
          createTime: ''
        },
        resetPasswordForm: {
          oldPassword: '',
          newPassword: '',
          confirmNewPassword: ''
        },
        //重置密码校验规则
        resetPasswordRules: {
          oldPassword: [
            {validator: oldPasswordValidator, trigger: ['blur']}
          ],
          newPassword: [
            {validator: newPasswordValidator, trigger: ['blur']}
          ],
          confirmNewPassword: [
            {validator: confirmPasswordValidator, trigger: ['blur', 'change']}
          ]
        }
      }
    },
    props: {
      /* userBasicInfo: {
         type: Object,
         default: {
           name: 'admin',
           nickName: '',
           mobile: '',
           avatar: '@/assets/user.png',
           role: '超级管理员',
           deptName: '',
           registerTime: '注册时间： 2022-01-10 22:12:12'
         }
       }*/
    },
    methods: {
      logout() {
        this.$confirm('确认退出吗？', '提示', {
          type: "warning"
        }).then(() => {
          localStorage.clear();
          this.$router.push('/login');
          this.$api.login.logout().then((res => {
            console.log(JSON.stringify(res));
          })).catch((res) => {
            console.error(JSON.stringify(res));
          })
        }).catch(() => {
        })
      },
      //获取登录人信息
      getMyInfo() {
        let username = localStorage.getItem('account');
        this.$api.user.findByName({username: username}).then((res) => {
          if (res.code === 200) {
            this.basicUser = res.data;
          }
        });
      },
      //显示个人信息
      showMyInfo() {
        this.dialogVisiblePerson = true;
      },
      //显示修改密码框
      showEditPassword() {
        this.dialogVisiblePassword = true;
      },
      //提交密码修改
      submitForm() {
        this.$refs.resetPasswordForm.validate((valid) => {
          if (valid) {
            this.$confirm('确定修改密码吗?', '提示', {}).then(() => {
              this.editLoading = true;
              this.$api.user.resetPassword(this.resetPasswordForm).then((res) => {
                this.editLoading = false;
                if (res.code === 200) {
                  this.dialogVisiblePassword = false;
                  this.$refs['resetPasswordForm'].resetFields();
                  this.$message.success('修改密码成功，即将跳转到登录页！');
                  setTimeout(() => {
                    localStorage.clear();
                    this.$router.push('/login');
                  }, 2000);
                } else {
                  this.$message({message: res.message, type: 'error'});
                }
              })
            })
          }
        });
      }
    },
    mounted() {
      this.getMyInfo();
    }
  }
</script>

<style scoped>
  .personal-panel {
    font-size: 14px;
    width: 280px;
    text-align: center;
    border-color: rgba(180, 190, 190, 0.2);
    border-width: 1px;
    border-style: solid;
    background: rgba(182, 172, 172, 0.1);
    margin: -14px;
  }

  .personal-desc {
    padding: 15px;
    color: #fff;
  }

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 90px;
  }

  .name-role {
    font-size: 16px;
    padding: 5px;
  }

  .main-operation {
    padding: 8px;
    margin-right: 1px;
    /* background: rgba(175, 182, 179, 0.3); */
    border-color: rgba(201, 206, 206, 0.2);
    border-top-width: 1px;
    border-top-style: solid;
  }

  .main-operation-item {
    margin: 15px;
  }

  .other-operation {
    padding: 15px;
    margin-right: 1px;
    text-align: left;
    border-color: rgba(180, 190, 190, 0.2);
    border-top-width: 1px;
    border-top-style: solid;
  }

  .other-operation-item {
    padding: 12px;
  }

  .other-operation-item:hover {
    cursor: pointer;
    background: #9e94941e;
    color: rgb(19, 138, 156);
  }

  .personal-footer {
    margin-right: 1px;
    font-size: 14px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: rgba(180, 190, 190, 0.2);
    border-top-width: 1px;
    border-top-style: solid;
  }

  .personal-footer:hover {
    cursor: pointer;
    color: rgb(19, 138, 156);
    background: #b1a6a61e;
  }
</style>
